<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body>

<style>
    menu {background: var(--sapphire);}
    menu-cont li a {line-height: 50px;padding: 0 20px;}
    menu-cont li > a {color: white;}
</style>

<!----------------------------------------------------------------------------------------->

<menu>
    <menu-cont>
        <li><a href="">one</a></li>
        <li><a>two</a>
            <menu-group>
                <a href="">one</a>
                <a href="">two</a>
                <a href="">three</a>
            </menu-group>
        </li>
        <li><a>three</a>
            <menu-group>
                <menu-list>
                    <h6>group</h6>
                    <a href="">one</a>
                    <a href="">two</a>
                    <a href="">three</a>
                </menu-list>
                <menu-list>
                    <h6>group</h6>
                    <a href="">one</a>
                    <a href="">two</a>
                    <a href="">three</a>
                </menu-list>
            </menu-group>
        </li>
    </menu-cont>
</menu>

<!----------------------------------------------------------------------------------------->

</body>
</html>